<template>
 <div>
   <common-head :title="title"/>
   <div class="wrap">
    <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in pics" :key="banner.id">
          <img :src="banner.pic" alt="">
        </van-swipe-item>
      </van-swipe>
      <div class="itemprice">
        <span class="itemprice-s">￥</span>
        <span class="itemprice-p">{{ basicInfo.originalPrice }}</span>
      </div>
      <h4>{{basicInfo.name}}</h4>
      <div class="content" v-html="content"></div>
    <!-- /轮播 -->
    <!-- 商品导航 -->
      <van-goods-action>
        <van-goods-action-icon @click="$router.push('/home')" icon="wap-home-o" text="首页" />
        <van-goods-action-icon @click="$router.push('/cart')" icon="shop-o" text="购物车" :badge="$store.state.cart.buyNumber||''"/>
        <van-goods-action-button @click="clickItemBtn" type="danger" text="加入购物车" />
      </van-goods-action>
    <!-- /商品导航 -->
    <!-- 商品弹出层 -->
      <van-popup v-model="skushow" closeable round position="bottom" :style="{ height: '30%' }">
        <van-card
          :num="sku.number"
          :price="sku.minPrice"
          :title="sku.name"
          :thumb="sku.pic"
        >
          <template #footer>
            <van-stepper v-model="sku.number"/>
            <van-button
              size="large"
              round style="margin-top:5px"
              color="#ff734c"
              @click="addCart"
              >确定</van-button>
          </template>
        </van-card>
      </van-popup>
    <!-- /商品弹出层 -->
   </div>
 </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { fetchDetailItem, addCart } from '_api'
import { getToken } from '_utils'
import { Toast } from 'vant'
export default {
  data () {
    return {
      title: '详情页',
      basicInfo: {},
      pics: [],
      price: 0,
      content: '',
      skushow: false,
      sku: {}
    }
  },
  created () {
    this.fetchdetail()
  },
  activated () {
    this.fetchdetail()
  },
  methods: {
    addCart (id, num) {
      id = this.$route.query.id
      num = this.sku.number
      addCart({
        goodsId: id,
        number: num,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          Toast.success('加入成功，请前往购买')
          this.$store.commit('cart/init_cart_info', {
            items: res.data.data.items,
            buyNumber: res.data.data.number
          })
        }
        this.skushow = false
      })
    },
    clickItemBtn () {
      this.skushow = true
    },
    fetchdetail () {
      fetchDetailItem(this.$route.query.id).then(res => {
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.pics = res.data.data.pics
          this.content = res.data.data.content.replace(/<img/gi, '<img style="display:block;width:100%"')
          this.sku = {
            number: 1,
            ...this.basicInfo
          }
        }
      })
    }

  },
  components: { CommonHead }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-top: 46px;
  padding-bottom: 50px;
  .itemprice{
    padding-left: 10px;
    margin-top: 10px;
    color: #fa1e32;
    .itemprice-s{
      font-size: 18px;
    }
    .itemprice-p{
      font-size: 25px;
    }
  }
  h4{
    font-size: 13px;
    margin-left: 10px;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
  }
  .content{
    font-size: 18px;
    margin: 10px;
  }
  .my-swipe{
    width: 10rem;
    height: 8rem;
    img{
      width: 10rem;
      height: 8rem;
    }
  }
}
</style>
